<template>
  <div class="quill-demo-container">
    <!-- 编辑模式页面标题 -->
    <div v-if="isEditMode" class="edit-header">
      <div class="header-content">
        <h1>编辑富文本内容</h1>
        <div class="edit-info">
          <h3>{{ currentEditItem?.name }}</h3>
          <p v-if="currentEditItem?.description">{{ currentEditItem.description }}</p>
        </div>
      </div>
      <div class="header-actions">
        <el-button @click="cancelEdit" type="default">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
      </div>
    </div>

    <!-- 演示模式页面标题 -->
    <div v-else class="demo-header">
      <h1>Quill 富文本编辑器</h1>
    </div>

    <!-- 编辑器实例 -->
    <div class="editor-section">
      <QuillEditor 
        ref="quillEditor" 
        v-model="editContent"
        :isNewMode="!isEditMode || !currentEditItem?.id"
        @save="handleSave"
      />
    </div>

    <!-- 演示模式操作按钮 -->
    <div v-if="!isEditMode" class="demo-actions">
      <el-button @click="insertSampleContent" type="primary">
        插入示例内容
      </el-button>
      <el-button @click="clearEditor" type="danger">
        清空编辑器
      </el-button>
    </div>
  </div>
</template>

<script>
import QuillEditor from './QuillEditor.vue'
import { Check, ArrowLeft } from '@element-plus/icons-vue'

export default {
  name: 'QuillEditorDemo',
  components: {
    QuillEditor,
    Check,
    ArrowLeft
  },
  props: {
    currentEditItem: {
      type: Object,
      default: null
    }
  },
  emits: ['save-content', 'cancel-edit'],
  data() {
    return {
      editContent: ''
    }
  },
  computed: {
    isEditMode() {
      return !!this.currentEditItem
    }
  },
  watch: {
    currentEditItem: {
      handler(newItem) {
        if (newItem && newItem.content) {
          // 尝试解析富文本内容
          try {
            const parsed = JSON.parse(newItem.content)
            if (parsed && typeof parsed === 'object' && parsed.html) {
              this.editContent = parsed.html
            } else {
              this.editContent = newItem.content
            }
          } catch (e) {
            // 不是JSON格式，直接使用原内容
            this.editContent = newItem.content
          }
        } else {
          this.editContent = ''
        }
      },
      immediate: true
    }
  },
  methods: {
    /**
     * 处理内容更新
     */
    handleContentUpdate(newContent) {
      this.editContent = newContent
    },

    /**
     * 处理保存事件
     */
    handleSave(richTextData) {
      if (this.isEditMode) {
        this.saveContent(richTextData)
      }
    },

    /**
     * 保存内容
     */
    saveContent(richTextData = null) {
      // 如果没有传入richTextData，从编辑器获取内容
      if (!richTextData && this.$refs.quillEditor) {
        richTextData = {
          html: this.editContent,
          text: this.$refs.quillEditor.getContent?.()?.text || '',
          delta: this.$refs.quillEditor.getContent?.()?.delta || null
        }
      }
      
      this.$emit('save-content', richTextData)
    },

    /**
     * 取消编辑
     */
    cancelEdit() {
      this.$emit('cancel-edit')
    },

    /**
     * 插入示例内容
     */
    insertSampleContent() {
      const sampleContent = `
        <h1>Quill编辑器 - 完整Markdown支持</h1>
        <h2>基本格式</h2>
        <p>这是一段<strong>加粗文本</strong>和<em>斜体文本</em>的示例。</p>
        <p>支持<u>下划线</u>和<del>删除线</del>效果。</p>
        
        <h2>列表</h2>
        <h3>无序列表</h3>
        <ul>
          <li>无序列表项目1</li>
          <li>无序列表项目2</li>
          <li>嵌套列表：
            <ul>
              <li>子项目1</li>
              <li>子项目2</li>
            </ul>
          </li>
        </ul>
        
        <h3>有序列表</h3>
        <ol>
          <li>第一项</li>
          <li>第二项</li>
          <li>第三项</li>
        </ol>
        
        <h2>引用和代码</h2>
        <blockquote>
          这是一个引用块的示例。支持多行引用内容。
        </blockquote>
        
        <p>内联代码示例：<code>console.log('Hello Quill!')</code></p>
        
        <h3>代码块</h3>
        <pre><code>function hello() {
  console.log('Hello, Markdown!');
  return 'success';
}</code></pre>
        
        <h2>链接和图片</h2>
        <p>这是一个<a href="https://quilljs.com">Quill官网链接</a>。</p>
        
        <h2>表格</h2>
        <table>
          <thead>
            <tr>
              <th>功能</th>
              <th>支持状态</th>
              <th>说明</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>标题</td>
              <td>✅</td>
              <td>支持H1-H6</td>
            </tr>
            <tr>
              <td>列表</td>
              <td>✅</td>
              <td>有序和无序列表</td>
            </tr>
            <tr>
              <td>表格</td>
              <td>✅</td>
              <td>完整表格支持</td>
            </tr>
          </tbody>
        </table>
        
        <hr>
        
        <p><strong>提示：</strong>点击"Markdown模式"按钮可以切换到Markdown编辑模式，体验完整的Markdown语法支持！</p>
      `
      if (this.$refs.quillEditor && this.$refs.quillEditor.$refs.quillEditor) {
        this.$refs.quillEditor.content = sampleContent
      }
      this.$message.success('示例内容已插入！')
    },

    /**
     * 清空编辑器
     */
    clearEditor() {
      this.$confirm('确定要清空编辑器内容吗？', '确认操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.$refs.quillEditor) {
          this.$refs.quillEditor.content = ''
        }
        this.$message.success('编辑器已清空！')
      }).catch(() => {
        this.$message.info('已取消操作')
      })
    }
  }
}
</script>

<style scoped>
.quill-demo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.demo-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px;
}

.demo-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
  color: white;
  border-radius: 8px;
}

.header-content h1 {
  margin: 0 0 10px 0;
  font-size: 24px;
  font-weight: 600;
}

.edit-info h3 {
  margin: 0 0 5px 0;
  font-size: 18px;
  opacity: 0.9;
}

.edit-info p {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.editor-section {
  margin-bottom: 20px;
}

.demo-actions {
  text-align: center;
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.demo-actions .el-button {
  margin: 0 10px;
}

@media (max-width: 768px) {
  .demo-actions .el-button {
    margin: 5px;
    display: block;
    width: 100%;
  }
}
</style>